<template>
	<div class="app-container">
		<div class="pt25">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
					<div class="bgWhite radius8 pb30">
						<div class="pl30 fb fs16 border-bottom pb25 pt25">
							秘籍库 > <span class="color2">{{title}}</span>
						</div>
						<div v-if="list.length > 0">
							<div class="plr20 pb30">
								<div class="flex col-center row-between border-bottom pb20 mt20 cursor"
									v-for="(item,index) in list" :key="index" @click="handelDetail(item)">
									<div style="width: 90%;">
										<div class="fs16 fb">{{item.title}}</div>
										<div class="fs14 color2 mt10 text-line-1">{{item.description}}</div>
									</div>
									<div class="fs14 main-color">
										浏览 {{item.viewCount || 0}}
									</div>
								</div>
							</div>
							<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
								v-model:limit="queryParams.pageSize" @pagination="getList" />
						</div>
						<div class="text-center" style="padding-bottom: 120px;" v-else>
							<img width="270" src="@/assets/images/screct.png" alt="" />
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
					<div class="bgWhite radius8">
						<div class="pl30 fb fs16 border-bottom pb25 pt25">
							热门秘籍
						</div>
						<div class="plr20 pb25">
							<div class="border-bottom pb30 mt20" 
							v-for="(item,i) in hotList" :key="i" @click="handelDetail(item)">
								<div class="cursor">
									<div class="fs16 fb">{{item.title}}</div>
									<div class="fs14 color2 mt10 text-line-1">{{item.description}}</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		managerList,
		cheatsList//热门秘籍
	} from "@/api/business/screct.js"
	export default {
		data() {
			return {
				title: '',
				title: '', //名称
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					categoryIds: '', //分类id
				},
				total: 10,
				list: [],
				hotList:[],//热门秘籍
			}
		},
		created() {
			this.queryParams.categoryIds = this.$route.query.id ? this.$route.query.id : ''
			this.title = this.$route.query.title ? decodeURIComponent(this.$route.query.title) : ''
			this.getHotList()
		},
		methods: {
			getList() {
				managerList(this.queryParams).then(res => {
					this.list = this.list.concat(res.rows)
					this.total = res.total
				})
			},
			//热门秘籍
			getHotList() {
				let data = {
					pageNum: 1,
					pageSize: 10,
				}
				cheatsList(data).then(res => {
					this.hotList = res.rows
					this.getList()
				})
			},
			handelDetail(item) {
				this.$router.push('/sort/sortDetail/' + item.id)
			},
		}
	}
</script>

<style>
</style>